<template>
    <div id="colorPanContainer" style="position: relative;">
        <div class="paigusu">
            <!--<button class="paigusu" style="padding:5px 20px;background: #fff;border: 1px solid #ccc;border-radius:4px;">点击我打开调色板</button>-->
        </div>
    </div>
</template>

<script>
    require("./js/paigusu.min.js");
    export default {
        name: "color-to-meterial",
        props:["currentTool"],
        data:function () {
            return {
                selectedColor:""
            }
        },
        methods:{
            /**
             * 初始化颜色面板
             */
            registorColorPan(){
                var self = this;
                $('.paigusu').paigusu({
                    color : '#1926dc'//初始色  支持两种配置方案
                    //color : '42,0,255'
                },function(event,obj){
                    //console.log(event);
                    //console.log(obj);
                    //$(event).css('color','#' + obj.hex)
                    self.selectedColor = obj.rgba;
                });
            },
            /**
             * 初始化pick监听
             */
            initPickListener () {
                var self = this;
                GOLOAlBAL_OPEOBJ.cameraControl.on("picked", function (hit) {
                    if(!(self.currentTool === "colorToMeterail")){
                        return ;
                    }
                    if(self.selectedColor){
                        var rgbastr = self.selectedColor.split(",");
                        var rgba = [(+rgbastr[0])/255,(+rgbastr[1])/255,(+rgbastr[2])/255,+rgbastr[3]];
                        hit.mesh.colorize = [rgba[0],rgba[1],rgba[2]];
                        console.log(hit.mesh.colorize);
                        hit.mesh.opacity = rgba[3];
                    }
                });
            }
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        beforeCreate(){
            console.log("colorToMeterial beforeCreate");
        },
        created(){
            console.log("colorToMeterial created");
        },
        beforeMount(){
            console.log("colorToMeterial beforeMount");
        },
        mounted(){
            console.log("colorToMeterial mouted");
            this.registorColorPan();
            this.initPickListener();
            $('.paigusu').trigger("click");
        },
        beforeUpdate(){

        },
        updated(){

        },
        beforeDestroy(){
            console.log("colorToMeterial beforeDestroy");
        },
        destroyed(){
            console.log("colorToMeterial destroyed");
        }
    }
</script>

<style scoped>
    #paigusu-color-picker{
        top: 0px !important;
    }
</style>